<template>
  <view class="openDialog" v-if="openDialog">
    <scroll-view class="scroll" scroll-y>
      <view class="title" style="margin-bottom: 40rpx"> 薪资范围 </view>
      <mySlider
        :fillValue="50"
        :minValue="startSalary"
        :maxValue="endSalary"
        @up="up"
        @down="down"
        @move="move"
        :step="10"
        inactiveColor="#000"/>

      <view class="salary mt">
        <view
          :class="item.salaryStatus ? 'salary-item-active' : 'salary-item'"
          v-for="item in salaryItemList"
          @click="handSalaryItm(item)">
          {{ item.name }}
        </view>
      </view>

      <view class="title mt"> 学历 </view>
      <view class="salary">
        <view
          :class="item.highlighted ? 'salary-item-active' : 'salary-item'"
          v-for="item in educationList"
          :key="item.id"
          @click="handSalaryItMultiple(item)">
          {{ item.name }}
        </view>
      </view>

      <view class="title mt"> 工作经验 </view>
      <view class="salary">
        <view
          :class="item.highlighted ? 'salary-item-active' : 'salary-item'"
          v-for="item in workExperienceList"
          :key="item.id"
          @click="handSalaryItMultiple(item)">
          {{ item.name }}
        </view>
      </view>

      <view class="title mt"> 年龄 </view>
      <view class="salary">
        <view
          :class="item.highlighted ? 'salary-item-active' : 'salary-item'"
          v-for="item in ageList"
          :key="item.id"
          @click="handSalaryItMultiple(item)">
          {{ item.name }}
        </view>
      </view>
    </scroll-view>
    <view class="btn">
      <view class="btn1" @click="cancel"> 取消 </view>

      <view class="btn2" @click="affirm"> 确认 </view>
    </view>
  </view>
</template>

<script>
import mySlider from "@/components/s-region-slider/s-region-slider.vue";
export default {
  components: { mySlider },
  data() {
    return {
      openDialog: false,

      //后端字段 起始薪资
      startSalary: 0,
      // 结束薪资
      endSalary: 0,
      // 薪资多选数据
      salaryItemList: [
        { name: "3千以下", id: 1, salaryStatus: false },
        { name: "3-5千", id: 2, salaryStatus: false },
        { name: "5-8千", id: 3, salaryStatus: false },
        { name: "0.8-1.2万", id: 4, salaryStatus: false },
        { name: "1.2-1.8万", id: 5, salaryStatus: false },
        { name: "1.8万以上", id: 6, salaryStatus: false },
      ],
      // 学历
      educationList: [
        { name: "本科", id: 1, highlighted: false },
        { name: "大专", id: 2, highlighted: false },
        { name: "硕士", id: 3, highlighted: false },
        { name: "研究生", id: 4, highlighted: false },
        { name: "高中", id: 5, highlighted: false },
        { name: "初中", id: 6, highlighted: false },
      ],
      // 工作经验
      workExperienceList: [
        { name: "0-1年", id: 1, highlighted: false },
        { name: "1-3年", id: 2, highlighted: false },
        { name: "3-5年", id: 3, highlighted: false },
        { name: "5-8年", id: 4, highlighted: false },
        { name: "8-10年", id: 5, highlighted: false },
        { name: "10年以上", id: 6, highlighted: false },
      ],

      // 年龄
      ageList: [
        { name: "0-1年", id: 1, highlighted: false },
        { name: "1-3年", id: 2, highlighted: false },
        { name: "3-5年", id: 3, highlighted: false },
        { name: "5-8年", id: 4, highlighted: false },
        { name: "8-10年", id: 5, highlighted: false },
        { name: "10年以上", id: 6, highlighted: false },
      ],
    };
  },
  computed: {},

  watch: {},
  onLoad(options) {},
  onShow() {},
  onReady() {},
  methods: {
    // 取消操作
    cancel() {
      this.openDialog = false;
      this.resetHighlightedItems(this.salaryItemList);
      this.resetHighlightedItems(this.educationList);
      this.resetHighlightedItems(this.workExperienceList);
      this.$emit("cancel", []);
      // 自定义事件
      this.$emit("reset", 0);
    },

    // 重置下拉数据
    resetHighlightedItems(list) {
      list.forEach((item) => {
        if (item.hasOwnProperty("highlighted")) {
          item.highlighted = false;
        }
        if (item.hasOwnProperty("salaryStatus")) {
          item.salaryStatus = false;
        }
      });
    },
    // 薪资单选
    handSalaryItm(item) {
      item.salaryStatus = !item.salaryStatus;

      this.salaryItemList.forEach((v) => {
        if (v !== item) {
          v.salaryStatus = false;
        }
      });

      this.$nextTick(() => {
        this.startSalary = 0;
        this.endSalary = 0;
      });
    },

    handSalaryItMultiple(item) {
      item.highlighted = !item.highlighted;
    },

    affirm() {
      let educationItem = [...this.educationList].filter(
        (item) => item.highlighted
      );
      let workExperienceItem = [...this.workExperienceList].filter(
        (item) => item.highlighted
      );
      let salaryItem = [...this.salaryItemList].filter(
        (item) => item.salaryStatus
      );

      const allData = {
        educationItem,
        workExperienceItem,
        salaryItem,
        startSalary: this.startSalary,
        endSalary: this.endSalary,
      };
      // 过滤出选中的数据

      // 数据抛出
      this.$emit("sendList", allData);

      // 清空选择项目
      this.cancel();
    },

    down(e) {
      const minValue = e.custom.minValue;
      const maxValue = e.custom.maxValue;
      this.startSalary = minValue;
      this.endSalary = maxValue;
      this.salaryItemList.forEach((item) => (item.salaryStatus = false));
    },
    up(e) {
      const minValue = e.custom.minValue;
      const maxValue = e.custom.maxValue;
      this.startSalary = minValue;
      this.endSalary = maxValue;
      this.salaryItemList.forEach((item) => (item.salaryStatus = false));
    },
    move(e) {
      const minValue = e.custom.minValue;
      const maxValue = e.custom.maxValue;
      this.startSalary = minValue;
      this.endSalary = maxValue;
      this.salaryItemList.forEach((item) => (item.salaryStatus = false));
    },
  },
};
</script>
<style lang="scss" scoped>
.openDialog {
  z-index: 9999;
  position: fixed;
  height: 100vh;
  width: 100%;
  background-color: #ffffff;
  border-bottom-left-radius: 32rpx; /* 左下角 */
  border-bottom-right-radius: 32rpx; /* 右下角 */

  .salary-item-active {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 218rpx;
    margin-bottom: 16rpx;
    height: 64rpx;
    background-color: #ff9e24;
    color: #ffffff;
    border-radius: 32rpx;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 24rpx;
  }

  .scroll {
    height: 55vh;

    .title {
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 28rpx;
      color: #000000e0;
      letter-spacing: 0;
      padding: 16rpx 24rpx;
    }

    .salary {
      padding: 0 24rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .salary-item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 218rpx;
        margin-bottom: 16rpx;
        height: 64rpx;
        background-color: #d8d8d85c;
        border-radius: 32rpx;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 24rpx;
      }
    }

    .mt {
      margin-top: 20rpx;
      margin-bottom: 20rpx;
    }
  }
  .btn {
    height: 88rpx;
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-top: 40rpx;

    .btn1 {
      width: 50%;
      height: 88rpx;
      line-height: 88rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 28rpx;
      color: #00000073;
      text-align: center;
    }
    .btn2 {
      width: 50%;
      height: 88rpx;
      line-height: 88rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 28rpx;
      color: #ff9e24;
      text-align: center;
    }
  }
}
</style>
